<template>
	<!-- icon 没有独占一行 说明是 行内元素或者 行内块元素-->
	<view>
		<view style="position: fixed; top: 0; left: 0;
		 width: 100%; background-color: #fff;
		 padding: 15rpx; z-index: 999;"
		 class="search_main">
			<view class="searchBox">
				<view class="searchBoxIcon">
					<icon type="search" size="14" />
				</view>
				<view class="searchBoxInput">
					<input placeholder="默认文本" />
				</view>
			</view>
			<!-- <view class="shoppingCart">
				<image mode="widthFix" class="shopping_image" src="@/static/searchBox/shopping.png"></image>
			</view>
			<view class="message">
				<image mode="widthFix" class="message_image" src="@/static/searchBox/message.png"></image>
			</view> -->
		</view>
		
	</view>
<!-- 	<view class="test">
		ssss
		
	</view> -->
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	/* @main_height: 100px; */
	.search_main {
		margin-top: 10px;
		width: calc(100% - 2px);
		display: flex;
		// justify-content: center;
		/* //设置主轴的方向 */
		/* flex-direction: column; */
		// align-items: center;
		border-radius: 60rem;
		box-sizing: border-box;

	}

	.searchBox {
		width: 180px;
		/* background-color: #f8f8f9; */
		float: left;
		height: 20px;
		// border-radius: 10px;
		padding: 5px;
		margin-left: 5%;
		// border: 1px solid red;
	}

	.searchBoxIcon {
		float: left;
		width: 20px;
	}

	.searchBoxInput {
		float: left;
		margin-left: 10px;
		width: 20px;
		font-size: 15px;
	}

	.searchBox icon {
		display: inline;
		/* background-color: blue; */
		/* display:flex; */
		/* justify-content:center; */
		/* align-items:center */

	}

	.searchBox input {
		/* display:inline-block; */
		/* display：block将元素转换为块级元素，一般用于将行内元素转换为块级元素 */
		/* display：inline将元素转换为行内元素，一般用于将块级元素转换为行内元素 */
		/* display：inline-block将元素转换为行内块元素 */
		display: inline-block;
		/* background-color: blue; */
		width: 60px;
		/* display:inline-block; */
		/* background-color: blue; */
	}

	.shoppingCart {
		/* border: 1px solid red; */
		margin-left: 15px;
		width: 35px;
		height: 35px;
		float: left;
		border-radius: 60px;
		/* background-color: #f8f8f9; */
	}

	.shopping_image {
		width: 22px;
		/* height: 18px; */
		margin-top: 20%;
		margin-left: 15%;
	}

	.message {
		/* border: 1px solid red; */
		width: 35px;
		height: 35px;
		float: left;
		border-radius: 60px;
		/* background-color: #f8f8f9; */
		margin-left: 15px;
	}

	.message_image {
		width: 18px;
		/* height: 46px; */
		margin-top: 10%;
		margin-left: 25%;
	}
</style>